<template>
  <div class="app">
    <van-nav-bar
      title=""
      left-text="搜索"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="sousuo">
        <div class="inputBox">
            <input type="text" placeholder="搜索商家，商品名称" v-model="searchText">
            <transition name="fade" mode="out-in">
                <div @click="search">搜索</div>
            </transition>           
        </div>


        <div class="block">
            <div class="del">
                <h4>历史搜索</h4>
                <div class="del-to" @click="delhistory">
                    <van-icon name="delete-o" size="20"/>
                    清空历史记录
                </div>               
            </div>           
            <div class="history">
                <span v-for="(item,index) in historylist" :key="index">{{item}}</span>
            </div>
        </div>

        <div class="find">
            <h4>搜索发现</h4>
            <div class="hotWards">
                <span v-for="(item,index) in list" :key="index">{{item}}</span>
            </div>
        </div>

    </div>
  </div>
</template>

<script >
import { Toast } from 'vant';
import { mapState} from 'vuex'
import { computed } from 'vue'
export default {
    data() {
        return{
            searchText: "",
            list: ['麻辣烫', '米线', '披萨', '蛋糕', '汉堡', '腊八粥', '烤肉拌饭', '炸鸡', '味多美']
        }       
    },
    computed:{
        ...mapState(['historylist'])
    },
    methods: {
        onClickLeft() {
        this.$router.go(-1)
        },
        search() {
        if(this.searchText){
             this.$router.push('/searchkey/'+this.searchText)
             this.$store.commit('history',this.searchText)
        }else{
            Toast('请输入关键字')
        }        
        },
        delhistory(){
            this.$store.commit('cleanhistory')
        }
    }
}
</script>

<style lang="scss" scoped>
.sousuo {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.inputBox {
    width: 100%;
    display: flex;
    margin: 20px 0;
}

.inputBox input {
    flex: 1;
    height: 40px;
    border: none;
    outline: none;
    border-radius: 20px;
    background-color: rgb(241, 241, 241);
    padding-left: 20px;
}

.inputBox div {
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: rgb(95, 195, 235);
    font-size: 18px;
}

.find {
    margin-top: 30px;
}
.del{
    display: flex;
    font-size: 16px;
    justify-content: space-between;
}
.del-to{
    margin-right: 20px;
    color: rgb(95, 195, 235);
}
span {
    display: inline-block;
    padding: 10px;
    background-color: rgb(241, 241, 241);
    margin-right: 10px;
    margin-top: 20px;
}
//跳路由动画
.fade-enter{
    opacity: 0;
  }
.fade-enter-active{
    transition: all 0.5s;
}
.fade-enter-to{
    opacity: 1;
}
/* 离场动画 */
.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  transition: all 0.2s;
}
.fade-leave-to{
    opacity: 0;
}
</style>